<template>
  <view>
    <view class="container">
      <el-row :gutter="30">
        <el-col :xs="24">
          <el-form :model="queryParams" ref="queryForm" inline label-width="68px">
            <el-form-item label="类型" prop="type">
              <el-select
                  v-model="queryParams.type"
                  placeholder="请选择类型"
                  clearable
                  size="small"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in projectType"
                    :key="item.type_name"
                    :label="item.type_name"
                    :value="item.type_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table v-loading="loading" :data="projects">
            <el-table-column label="序号" align="center" type="index" show-overflow-tooltip width="100">
              <template slot-scope="scope">{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="志愿项目名称" align="center" key="name" prop="name"/>
            <el-table-column label="志愿类型" align="center" prop="type" key="type"/>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleShow(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-show="total>0"
              :total="total"
              :current-page.sync="queryParams.pageNum"
              :page-size.sync="queryParams.pageSize"
              hide-on-single-page
              background
              layout="pager,total"
              @current-change="getList"
          />
        </el-col>
      </el-row>
    </view>
    <el-dialog :visible.sync="showDetail" title="打卡情况" width="600" append-to-body>
<!--      <unicloud-db-->
<!--          ref="udb" collection="project-activity-info, project-activity"-->
<!--          :where="`user_id=='${user._id}'`"-->
<!--          field="user_id,activityId{name}" v-slot:default="{data,loading,error}"-->
<!--      >-->
<!--        <ul v-if="data.length>0" class="active_list">-->
<!--          <li v-for="(item,index) in data" class="active_list-item" :key="index" v-if="item.activityId.length>0">-->
<!--            {{item.activityId[0].name}}-->
<!--          </li>-->
<!--        </ul>-->
<!--        <view v-else>暂未参加过活动</view>-->
<!--      </unicloud-db>-->
      <ul>
        <li>
          <el-row :gutter="10">
            <el-col :span="12">成员</el-col>
            <el-col :span="12">打卡次数</el-col>
          </el-row></li>
        <li v-for="user in activityUsers" :key="user._id">
          <el-row :gutter="10">
            <el-col :span="12">{{ user.username || user[0].username }}</el-col>
            <el-col :span="12">{{user.signNum||0}}</el-col>
          </el-row></li>
      </ul>
    </el-dialog>
  </view>
</template>

<script>
import {getProject, getSignNum, getTypeList} from "../../../api/project";

export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null
      },
      total: 0,
      projectType: [],
      projects: [],
      loading: false,
      showDetail:false,
      activityUsers:[]
    }
  },
  created: function () {
    let that = this
    getTypeList()
        .then(res => {
          that.projectType = res.result.data
        })
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getProject(this.queryParams)
        .then(res=>{
          console.log(res);
          this.total = res.length
          this.projects = res
        })
      this.loading = false
    },
    resetQuery() {
      this.queryParams.type = null
      this.queryParams.school = null
      this.handleQuery()
    },
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    handleShow(data) {
      let d = data.member
      for (const dElement of d) {
        getSignNum({
          activityId:data._id,
          user_id:dElement._id||dElement[0]._id
        })
          .then(res=>{
              dElement.signNum = res.result.count
          })
      }
      this.activityUsers = d
      this.showDetail = true
    }
  }
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}
</style>
